<template>
  <div class="page-content">
    <div class="part1 flex-row-between">
      <!-- 左侧 -->
      <div class="leftMain">
        <div class="leftTop showShadow" style="padding: 19px 23px 13px 24px">
          <div class="leftTopItem clearfix">
            <div
              title="山东万兴家具有限公司"
              class="title"
              style="margin-top: 10px; margin-right: 7px; font-size: 18px"
            >
              山东万兴家具有限公司
            </div>
            <!---->
            <div class="Atext clearfix jbtextB">
              <span class="Atext1">B</span>
              <span class="Atext2">级纳税人</span>
            </div>
            <!---->
            <!---->
          </div>
          <div class="leftTopItem clearfix" style="margin-top: 5px">
            <span
              style="
                display: inline-block;
                float: left;
                width: 200px;
                height: 29px;
                font-family: Helvetica, sans-serif;
                font-size: 16px;
                line-height: 29px;
              "
            >
              9137148116764844X0
            </span>
            <span class="gsbrlCla">{{ text }}</span>
          </div>
        </div>
        <div
          class="showShadow"
          style="height: 260px; padding: 0 24px; background: rgb(255 255 255)"
        >
          <div class="listHead">
            <span
              style="display: inline-block; font-size: 18px; font-weight: 600; color: rgb(51 51 51)"
            >
              我的提醒
            </span>
            <svg
              fill="none"
              viewBox="0 0 16 16"
              width="1em"
              height="1em"
              class="t-icon t-icon-chevron-right icon"
              style="margin-top: -3px; font-size: 16px; color: rgb(0 0 0 / 90%)"
            >
              <path
                fill="currentColor"
                d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
                fill-opacity="0.9"
              />
            </svg>
          </div>
          <div>
            <template v-if="msgData.length > 0">
              <div v-for="(item, index) in msgData" :key="index" class="listItem flex-row-between">
                <div class="listItem_info">
                  {{ item.title }}
                </div>
                <div class="rq">{{ item.createtime }}</div>
              </div>
            </template>

            <!-- 空 -->
            <div v-else class="g-table-empty-placeholder g-table-empty-placeholder__border">
              <div class="g-table-empty-placeholder__container">
                <div class="g-table-empty-placeholder__icon-wrapper">
                  <img
                    src="../../assets/icon3.png"
                    alt=""
                    class="g-table-empty-placeholder__icon"
                  />
                </div>
                <div class="g-table-empty-placeholder__info">暂无数据</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧 -->
      <div
        class="rightMain"
        style="
          background: rgb(255 255 255);
          border-radius: 2px;
          box-shadow: rgb(0 0 0 / 6%) 0 2px 6px 0;
        "
      >
        <div style="position: relative">
          <div class="title" style="color: rgb(51 51 51)">
            <span
              style="display: inline-block; font-size: 18px; font-weight: 600; color: rgb(51 51 51)"
            >
              我的待办
            </span>
            <svg
              fill="none"
              viewBox="0 0 16 16"
              width="1em"
              height="1em"
              class="t-icon t-icon-chevron-right icon"
              style="margin-top: -3px; font-size: 16px; color: rgb(0 0 0 / 90%)"
            >
              <path
                fill="currentColor"
                d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
                fill-opacity="0.9"
              />
            </svg>
          </div>
          <el-tabs v-model="activeName1">
            <el-tab-pane label="本期应申报" name="1" />
            <el-tab-pane label="待签收文书" name="2" />
            <el-tab-pane label="风险疑点" name="3" />
            <el-tab-pane label="其它" name="4" />
          </el-tabs>
          <el-table
            :data="part1Data"
            style="width: 100%; margin-top: 8px"
            :header-cell-style="{
              color: '#666666',
              backgroundColor: '#f9fafd',
              fontWeight: '400',
              fontSize: '16px',
              height: '58px',
              borderTop: 'none',
              borderBottom: 'none',
            }"
          >
            <el-table-column label="事项名称" minWidth="290" show-overflow-tooltip>
              <template #default="scope">
                {{ scope.row.title || "-" }}
              </template>
            </el-table-column>
            <el-table-column label="办理期限" minWidth="120" align="center">
              <template #default="scope">
                {{ scope.row.date || "-" }}
              </template>
            </el-table-column>
            <el-table-column label="标签状态" minWidth="120" align="center">
              <template #default="scope">
                <span :class="scope.row.var == '已申报' ? 'kGreen' : 'korange'">
                  {{ scope.row.var }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="操作" minWidth="120" align="center">
              <template #default="scope">
                <span class="t-button__text">
                  {{ scope.row.operate }}
                </span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <div class="part2">
      <div class="cjbs">
        <div class="header">
          <div class="tit-item">
            <span class="text">热门服务</span>
          </div>
        </div>
        <div class="main clearfix" style="left: 0">
          <a
            v-for="(item, index) in part2Data"
            :key="index"
            class="item a_blue"
            @click="goPath(item.path)"
          >
            <div class="item-con">
              <div class="img-box">
                <img class="i" :src="item.icon" alt="" />
              </div>
              <p :title="item.name" class="item-info">{{ item.title }}</p>
            </div>
          </a>
        </div>
        <div class="leftIcon show">
          <svg
            fill="none"
            viewBox="0 0 16 16"
            width="1em"
            height="1em"
            class="t-icon t-icon-chevron-left"
            style="width: 32px; height: 32px"
          >
            <path
              fill="currentColor"
              d="M9.54 3.54l.92.92L6.92 8l3.54 3.54-.92.92L5.08 8l4.46-4.46z"
              fill-opacity="0.9"
            />
          </svg>
        </div>
        <div class="rightIcon show">
          <svg
            fill="none"
            viewBox="0 0 16 16"
            width="1em"
            height="1em"
            class="t-icon t-icon-chevron-right"
            style="width: 32px; height: 32px"
          >
            <path
              fill="currentColor"
              d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
              fill-opacity="0.9"
            />
          </svg>
        </div>
        <div class="footerscsc" style="display: block">
          <div class="box active" />
          <div class="box" />
        </div>
      </div>
    </div>

    <div class="part3">
      <el-tabs v-model="activeName3">
        <el-tab-pane label="我的收藏" name="1">
          <div class="second clearfix">
            <div class="main" style="left: 0">
              <div class="item a_blue">
                <div class="item-con">
                  <div class="icon-box">
                    <img class="i" src="../../assets/icon5.png" alt="" />
                  </div>
                  <p class="item-info">添加收藏</p>
                </div>
              </div>
            </div>
            <div class="leftIcon show">
              <svg
                fill="none"
                viewBox="0 0 16 16"
                width="1em"
                height="1em"
                class="t-icon t-icon-chevron-left"
                style="width: 32px; height: 32px"
              >
                <path
                  fill="currentColor"
                  d="M9.54 3.54l.92.92L6.92 8l3.54 3.54-.92.92L5.08 8l4.46-4.46z"
                  fill-opacity="0.9"
                />
              </svg>
            </div>
            <div class="rightIcon show">
              <svg
                fill="none"
                viewBox="0 0 16 16"
                width="1em"
                height="1em"
                class="t-icon t-icon-chevron-right"
                style="width: 32px; height: 32px"
              >
                <path
                  fill="currentColor"
                  d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
                  fill-opacity="0.9"
                />
              </svg>
            </div>
            <div class="footerscsc clearfix" style="display: none">
              <div class="box active" />
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="场景办税" name="2">
          <div class="first clearfix">
            <div class="main-cjbs" style="left: 0">
              <a v-for="(item, index) in part3Data" :key="index" class="item a_blue">
                <div class="item-con">
                  <div class="img-box">
                    <img class="i" :src="item.icon" alt="" />
                  </div>
                  <p :title="item.name" class="item-info">{{ item.title }}</p>
                </div>
              </a>
            </div>
            <div class="leftIcon show">
              <svg
                fill="none"
                viewBox="0 0 16 16"
                width="1em"
                height="1em"
                class="t-icon t-icon-chevron-left"
                style="width: 32px; height: 32px"
              >
                <path
                  fill="currentColor"
                  d="M9.54 3.54l.92.92L6.92 8l3.54 3.54-.92.92L5.08 8l4.46-4.46z"
                  fill-opacity="0.9"
                />
              </svg>
            </div>
            <div class="rightIcon show">
              <svg
                fill="none"
                viewBox="0 0 16 16"
                width="1em"
                height="1em"
                class="t-icon t-icon-chevron-right"
                style="width: 32px; height: 32px"
              >
                <path
                  fill="currentColor"
                  d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
                  fill-opacity="0.9"
                />
              </svg>
            </div>
            <div class="footerscsc" style="display: block">
              <div class="box active" />
              <div class="box" />
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

    <div class="part4">
      <div class="tax-delated-query">
        <div class="header">
          <img
            src="https://etax.shandong.chinatax.gov.cn:8443/assets_res/img/wntj.b701d549.png"
            alt=""
            class="headerImg"
          />
          <div class="wntj-img">
            <div class="wntj-weini">weini</div>
            <div class="wntj-tuijian">tuijian</div>
            <div class="wntj-wz">为你推荐</div>
          </div>
        </div>
        <div class="container">
          <div class="item">
            <ul style="list-style: none">
              <li>
                <div class="item-gzxx" style="padding-right: 12px">
                  <span class="item-d" />
                  <div
                    title="国家税务总局关于资源回收企业向自然人报废产品出售者“反向开票”有关事项的公告"
                    class="title"
                    style="padding-right: 12px"
                  >
                    国家税务总局关于资源回收企业向自然人报废产品出售者“反向开票”有关事项的公告
                  </div>
                  <div class="fbsj">2024/4/24</div>
                </div>
              </li>
              <li>
                <div class="item-gzxx" style="padding-right: 12px">
                  <span class="item-d" />
                  <div
                    title="国家税务总局 人力资源社会保障部 农业农村部 教育部 退役军人事务部关于重点群体和自主就业退役士兵创业就业税收政策有关执行问题的公告"
                    class="title"
                    style="padding-right: 12px"
                  >
                    国家税务总局 人力资源社会保障部 农业农村部 教育部
                    退役军人事务部关于重点群体和自主就业退役士兵创业就业税收政策有关执行问题的公告
                  </div>
                  <div class="fbsj">2024/3/29</div>
                </div>
              </li>
              <li>
                <div class="item-gzxx" style="padding-right: 12px">
                  <span class="item-d" />
                  <div
                    title="国家税务总局关于修改《中华人民共和国发票管理办法实施细则》的决定"
                    class="title"
                    style="padding-right: 12px"
                  >
                    国家税务总局关于修改《中华人民共和国发票管理办法实施细则》的决定
                  </div>
                  <div class="fbsj">2024/1/15</div>
                </div>
              </li>
              <li>
                <div class="item-gzxx" style="padding-right: 12px">
                  <span class="item-d" />
                  <div
                    title="国家税务总局关于修订《研发机构采购国产设备增值税退税管理办法》的公告"
                    class="title"
                    style="padding-right: 12px"
                  >
                    国家税务总局关于修订《研发机构采购国产设备增值税退税管理办法》的公告
                  </div>
                  <div class="fbsj">2023/12/26</div>
                </div>
              </li>
              <li>
                <div class="item-gzxx" style="padding-right: 12px">
                  <span class="item-d" />
                  <div
                    title="财政部 税务总局关于延续实施医疗服务免征增值税等政策的公告"
                    class="title"
                    style="padding-right: 12px"
                  >
                    财政部 税务总局关于延续实施医疗服务免征增值税等政策的公告
                  </div>
                  <div class="fbsj">2023/9/26</div>
                </div>
              </li>
            </ul>
          </div>
          <div class="item">
            <ul style="list-style: none">
              <li>
                <div class="item-gzxx">
                  <span class="item-d-right" />
                  <div
                    title="国家税务总局关于优化纳税服务&ensp;简并居民企业报告境外投资和所得信息有关报表的公告"
                    class="title"
                  >
                    国家税务总局关于优化纳税服务&ensp;简并居民企业报告境外投资和所得信息有关报表的公告
                  </div>
                  <div class="fbsj-right">2023/9/7</div>
                </div>
              </li>
              <li>
                <div class="item-gzxx">
                  <span class="item-d-right" />
                  <div
                    title="财政部&ensp;税务总局关于先进制造业企业增值税加计抵减政策的公告"
                    class="title"
                  >
                    财政部&ensp;税务总局关于先进制造业企业增值税加计抵减政策的公告
                  </div>
                  <div class="fbsj-right">2023/9/7</div>
                </div>
              </li>
              <li>
                <div class="item-gzxx">
                  <span class="item-d-right" />
                  <div
                    title="国家税务总局关于进一步落实支持个体工商户发展个人所得税优惠政策有关事项的公告"
                    class="title"
                  >
                    国家税务总局关于进一步落实支持个体工商户发展个人所得税优惠政策有关事项的公告
                  </div>
                  <div class="fbsj-right">2023/9/3</div>
                </div>
              </li>
              <li>
                <div class="item-gzxx">
                  <span class="item-d-right" />
                  <div
                    title="财政部 税务总局 退役军人事务部关于进一步扶持自主就业退役士兵创业就业有关税收政策的公告"
                    class="title"
                  >
                    财政部 税务总局
                    退役军人事务部关于进一步扶持自主就业退役士兵创业就业有关税收政策的公告
                  </div>
                  <div class="fbsj-right">2023/8/2</div>
                </div>
              </li>
              <li>
                <div class="item-gzxx">
                  <span class="item-d-right" />
                  <div
                    title="财政部 税务总局关于金融机构小微企业贷款利息收入免征增值税政策的公告"
                    class="title"
                  >
                    财政部 税务总局关于金融机构小微企业贷款利息收入免征增值税政策的公告
                  </div>
                  <div class="fbsj-right">2023/8/1</div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!-- 客服 -->
    <div
      id="parent"
      class="znhd-sdk-float-menu-wrapper"
      style="inset: 44% 0 auto auto; z-index: 9999"
    >
      <div class="znhd-sdk-agent-image-wrapper">
        <div class="znhd-sdk-agent-image" />
        <div class="znhd-sdk-right-wrapper">
          <!---->
          <div class="znhd-sdk-btn-wrapper" />
        </div>
      </div>
      <div class="znhd-sdk-chat-bubble-wrapper">
        <div class="znhd-sdk-chat-bubble">
          <div class="znhd-sdk-rectangle-speech-border znhd-sdk-rectangle-speech-border-small">
            <span title="需要帮助吗？" class="znhd-sdk-text znhd-sdk-text-small">需要帮助吗？</span>
            <!---->
          </div>
        </div>
      </div>
      <!---->
      <!---->
      <div data-v-321230d8="" class="zsnr-dialog"><!----></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import Http from "@/utils/api";
import { useRouter } from "vue-router";
import router from "@/router";

const rout = useRouter();

const activeName1 = ref("1");
const activeName3 = ref("1");
const part1Data = ref<any>([]);
const part2Data = ref<any>([
  {
    title: "增值税及附加税费申报（一般... ",
    name: "增值税及附加税费申报（一般纳税人适用）",
    icon: "/src/assets/icon-r1.png",
  },
  {
    title: "综合关联式申报",
    name: "综合关联式申报",
    icon: "/src/assets/icon-r2.png",
  },
  {
    title: "居民企业（查账征收）企业所... ",
    name: "居民企业（查账征收）企业所得税月（季）度申报",
    icon: "/src/assets/icon-r3.png",
  },
  {
    title: "财务报表报送及更正",
    name: "财务报表报送及更正",
    icon: "/src/assets/icon-r4.png",
  },
  { title: "税费缴纳", name: "税费缴纳", icon: "/src/assets/icon-r5.png" },
  { title: "发票业务", name: "发票业务", icon: "/src/assets/icon-r6.png", path: "/invoice1" },
  { title: "社保费业务", name: "社保费业务", icon: "/src/assets/icon-r7.png" },
  { title: "税务数字账户", name: "税务数字账户", icon: "/src/assets/icon-r8.png" },
  {
    title: "办税进度及结果查询",
    name: "办税进度及结果查询",
    icon: "#cs-GN00000240000205",
  },
  { title: "红字发票开具", name: "红字发票开具", icon: "#cs-GN00000140000036" },
]);
const part3Data = ref<any>([
  {
    title: "发票代开",
    name: "发票代开",
    icon: "/src/assets/icon-c1.png",
  },
  {
    title: "一站式退税",
    name: "一站式退税",
    icon: "/src/assets/icon-c2.png",
  },
  {
    title: "“走出去”税收服务",
    name: "“走出去”税收服务",
    icon: "/src/assets/icon-c3.png",
  },
  {
    title: "财产和行为税税源采集及合并...",
    name: "财产和行为税税源采集及合并申报",
    icon: "/src/assets/icon-c4.png",
  },
  { title: "涉税专业服务机构管理", name: "涉税专业服务机构管理", icon: "/src/assets/icon-c5.png" },
  {
    title: "存款账户报告及三方协议签订",
    name: "存款账户报告及三方协议签订",
    icon: "/src/assets/icon-c6.png",
  },
  { title: "稽查案件管理", name: "稽查案件管理", icon: "/src/assets/icon-c7.png" },
  { title: "跨区域涉税事项管理", name: "跨区域涉税事项管理", icon: "/src/assets/icon-c8.png" },
  {
    title: "对外支付综合办税",
    name: "对外支付综合办税",
    icon: "cs-GN00000140000297",
  },
  { title: "企业集团内控式办税", name: "企业集团内控式办税", icon: "cs-GN00000120000015" },
]);
const msgData = ref<any>([]);
const text = ref<any>("");

// 获取消息提醒
function getData() {
  Http.Get("api5", {}).then((res: any) => {
    if (res.code == 1) {
      text.value = res.data.login_read_calendar;
    } else {
      ElMessage({
        message: res.message,
        type: "error",
        plain: true,
      });
    }
  });

  Http.Get("api6", {}).then((res: any) => {
    if (res.code == 1) {
      msgData.value = res.data;
    } else {
      ElMessage({
        message: res.message,
        type: "error",
      });
    }
  });

  Http.Get("api7", {}).then((res: any) => {
    if (res.code == 1) {
      part1Data.value = res.data;
    } else {
      ElMessage({
        message: res.message,
        type: "error",
      });
    }
  });
}

function goPath(url: any) {
  const resolved = rout.resolve({ path: url });
  window.open(resolved.href, "_blank");
}

onMounted(() => {
  localStorage.removeItem("searcha6");
  localStorage.removeItem("searcha14");
  localStorage.removeItem("searcha15");
  getData();
});
</script>

<style lang="scss" scoped>
@use "./css/part1";
@use "./css/part2";
@use "./css/part3";
@use "./css/part4";
@use "./css/online";

.page-content {
  width: 1184px;
  margin: 0 auto;
  border-radius: 2px;
}
</style>
